<template>
	<view>
		<view class="p-r-30 pbox fl-s-c relative">
			<!-- <view class="w-1 fr-e-c">
				<text class="c-33 fs-28" @click="$u.route('/pagemaster/pages/Login/Register')">成为师傅</text>
			</view> -->
			<view class="fl-c">
				<image src="/static/logo.png" class="br-20" style="margin-top: 60rpx; width: 160rpx; height: 160rpx;" mode="aspectFill"></image>
				<text class="c-33 fs-28 bold m-t-15">共享电工</text>
			</view>
			<view class="qiebox fr-s-c">
				<view class="fr-c" @click="type=index" :class="type==index?'actbox':'itbox'" v-for="(item,index) in types" :key="index">{{item}}</view>
			</view>
			<view class="ibox fr-s-c" style="margin-top: 56rpx;">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/phone.png'" mode=""></image>
				<text class="c-33 fs-28 bold">+86</text>
				<input type="number" maxlength="11" v-model="mobile" style="margin-left: 15rpx;" class="flex-1 fs-28"
					placeholder="请输入手机号码" />
			</view>
			<view class="ibox fr-s-c m-t-25" v-if="type==0">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/security.png'" mode=""></image>
				<input type="number" maxlength="6" v-model="code" class="flex-1 m-l-15 fs-28" placeholder="请输入验证码" />
				<text class="c-main codebtn fr-c fs-20" @click="getCode">{{tips}}</text>
			</view>
			<view class="ibox fr-s-c m-t-25" v-if="type==1">
				<image style="width: 48rpx; height: 48rpx;" :src="$path + '/login/pwd.png'"  mode=""></image>
				
				<input :password="pwd" v-model="password" type="text" class="flex-1 m-l-15 fs-28" placeholder="输入密码" />
				<!-- <up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon> -->
				<text class="c-33 fs-24" @click="$u.route('/pagemaster/pages/Login/ForgetPwd')">忘记密码</text>
			</view>
			<!-- <view class="w-1 fr-b-c m-t-20" style="color: #606060;">
				<text class="fs-24" @click="$u.route('/pagemaster/pages/Login/Register')">注册账号</text>
				<text class="fs-24" @click="$u.route('/pagemaster/pages/Login/ForgetPwd')">忘记密码</text>
			</view> -->
			<view class="w-1 fr-s-c">
				<view class="c-99 fr-s-c fs-24" style="padding: 35rpx 0;">
					<view class="fr-s-c" @click="agree=!agree">
						<image v-if="agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/y.png'"></image>
						<image v-if="!agree" style="width: 32rpx; height: 32rpx;" :src="$path + '/login/n.png'"></image>
						<text class="m-l-10">我已阅读并同意</text>
					</view>
					<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=3" hover-class="none">《用户协议》
					</navigator>
					<text class="c-main">和</text>
					<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=2" hover-class="none">《隐私政策》
					</navigator>
				</view>
			</view>
			<view class="r-btn fr-c bg-main c-ff" @click="login" style="border: none; margin-top: 60rpx; width: 564rpx;">登录</view>
			<!-- <view class="r-btn fr-c c-33 fs-32 m-t-20"  @click="$u.route('/pagemaster/pages/Login/Register')" style="width: 564rpx;">注册</view> -->
			
			<view class="flex-1"></view>
			
		</view>
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	import {storeToRefs} from 'pinia';
	import useUserStore from '@/stores/user.js';
	
	const {nowid} = storeToRefs(useUserStore())
	// const {getnum} = useUserStore()
	
	
	
	const types = ['验证码登录','密码登录'];
	const type = ref(0)
	const first = ref(0);
	onLoad((o) => {
		// if (uni.$u.page().includes(uni.$u.pages()[0].route)) {
		// 	console.log('当前是第一页')
		// 	first.value = 1
		// } else {
		// 	console.log('不是第一页')
		// 	first.value = 0
		// }
	})
	
	
	
	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		// console.log(text)
		tips.value = text;
	};
	
	const getCode = () => {
		if (!mobile.value) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url: "/api/Sms/send",
				data: {
					mobile: mobile.value,
					event: 'login', // 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res => {
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	}
	
	const mobile = ref('')
	const code = ref('')
	const agree = ref(false)
	const pwd = ref(true)
	const password = ref('')
	function login(){
		if(!mobile.value) return uni.$u.toast('请输入手机号');
		if(!agree.value) return uni.$u.toast('请阅读并同意用户协议和隐私政策');
		if(type.value==0){
			if(!code.value) return uni.$u.toast('请输入验证码');
			// 验证码
			uni.$post({
				url:'/api/user/mobilelogin',
				data:{
					mobile:mobile.value,
					captcha:code.value,
					group:3
				}
			}).then(res=>{
				nowid.value = 2;
				const user = res.data.userinfo;
				uni.setStorageSync('user', user)
				// 0=未认证,1=认证成功,2=待审核',
				if(res.data.userinfo.starf_status==0){
					uni.navigateTo({
						url:'./AuthName'
					})
				}else{
					getApp().tt(res.msg,'success')
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}
				
				
			})
		}else{
			if(!password.value) return uni.$u.toast('请输入密码');
			// 密码
			uni.$post({
				url:'/api/user/login',
				data:{
					account:mobile.value,
					password:password.value,
					group:3
				}
			}).then(res=>{
				nowid.value = 2;
				const user = res.data.userinfo;
				uni.setStorageSync('user', user)
				if(res.data.userinfo.starf_status==0){
					uni.navigateTo({
						url:'./AuthName'
					})
				}else{
					getApp().tt(res.msg,'success')
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}
			})
		}
		
	}
	
	
	
	// 微信登录
	function welogin() {
		return;
		if (!agree.value) return uni.$u.toast('请阅读并同意用户协议和隐私政策');
		uni.login({
		    "provider": "weixin",
		    "onlyAuthorize": true, // 微信登录仅请求授权认证
		    success: event => {
		        console.log("App微信获取用户信息成功", event);
				uni.$post({
					url:'/api/user/wxopenid',
					data:{
						code:event.code,
						type:2
					}
				}).then(res=>{
					let openid = res.data.openid;
					console.log(res.data)
					uni.$post({
					    url:"/api/User/wechatUserInfo",
					    data:{
					       openid:openid,
					       nickname:res.data.nickname,
					       wxavatar:res.data.headimgurl,
					    }
					}).then(res=>{
					    console.log('微信app登录成了',res)
					    if(res.code==1){
					        // 绑定的有 正常登录
							uni.$u.toast('登录成功')
							uni.setStorageSync('user', res.data.userinfo)
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/index/index',
								})
							}, 1500)
					    }
					    if(res.code==2){
					        uni.navigateTo({
					            url: "/pagemaster/pages/Login/bindsphone?user=" + encodeURIComponent(JSON.stringify({
					                wx_openid:res.data
					            }).replace(/%/g, '%25'))
					        })
					    }
						if(res.code==500){
						    uni.$u.toast('服务端异常')
							return
						}
					})
				})
		    },
		    fail: (err) => {
		        console.log("App微信获取用户信息失败", err);
		    }
		})
	}
	
</script>

<style>
	page {
		background: #ffffff;
	}

	.pbox{
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
	}
	
	.ibox {
		padding: 0 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #f8f8f8;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}

	.row-line {
		width: 34rpx;
		height: 4rpx;
		background: #333333;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.codebtn{
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}
	
	.qiebox{
		width: 690rpx;
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin-top: 108rpx;
	}
	.actbox{
		width: 345rpx;
		height: 100rpx;
		background: #01796d;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.itbox{
		width: 345rpx;
		height: 100rpx;
		background: #f8f8f8;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: #9D9D9D;
		text-align: center;
	}
	
	
	.r-btn{
		width: 564rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #E0E0E0;
	}
</style>